<template>
  <a-layout-header>
    <span
      class="iconfont iconcaidan cp menu_trigger primary_color_hover"
      @click="handleCollapsed"
      :class="{ active: collapsed }"
    ></span>
    <a-row class="main_header">
      <a-col :span="24">
        <div class="right_menu f_r">
          <a-row
            type="flex"
            justify="space-between"
            align="middle"
            :gutter="12"
          >
            <a-col class="screen_full">
              <screenfull></screenfull>
            </a-col>
            <a-col class="locale">
              <a-dropdown placement="bottomCenter">
                <i class="iconfont iconduoyuyan cp primary_color_hover"></i>
                <template #overlay>
                  <a-menu @click="handleLocaleChange">
                    <a-menu-item key="zh" :disabled="locale === 'zh'">
                      中文
                    </a-menu-item>
                    <a-menu-item key="en" :disabled="locale === 'en'">
                      English
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </a-col>
            <a-col
              class="avatar_container cp"
              @mouseenter.stop="handleAvatarOver(true)"
              @mouseleave="handleAvatarOver(false)"
            >
              <a-popover placement="bottomRight" :mouseEnterDelay="0.3">
                <template #content>
                  <p
                    class="cp a_header_popover primary_color_hover"
                    @click="handleClick"
                    :style="{ opacity: loading ? 0.6 : 1 }"
                  >
                    <i v-if="!loading" class="iconfont icontuichu"></i>
                    <span v-else class="icon-loading">
                      <i class="iconfont iconjiazai"></i>
                    </span>
                    {{ $t("message.logout") }}
                  </p>
                </template>
                <template #title>
                  <span>@BEN</span>
                </template>
                <a-avatar :size="36">
                  <img src="@/assets/header/avatar.gif" alt="avatar" />
                </a-avatar>
                <transition name="fade-transform-up">
                  <CaretDownOutlined
                    v-if="avatarFade"
                    class="a_caret_down"
                    :style="{ fontSize: '12px', color: '#4a4a4a' }"
                  />
                </transition>
              </a-popover>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </a-layout-header>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, getCurrentInstance } from "vue";
import { CaretDownOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import router from "@/router";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import Screenfull from "@/components/Screenfull/index.vue";

export default defineComponent({
  name: "AppHeader",
  props: {},
  components: {
    CaretDownOutlined,
    Screenfull,
  },
  data() {
    return {};
  },
  setup(props, ctx) {
    let loading = ref(false);
    let collapsed = ref(false);
    let avatarFade = ref(false);
    const store = useStore();
    const proxy = getCurrentInstance()?.proxy;

    const handleClick = (): void => {
      if (!loading.value) {
        loading.value = true;
        store.dispatch("CLEAR_ALLDATA", {}).then(() => {
          router.push({ path: "/login" });
          loading.value = false;
        });
      }
    };

    const handleCollapsed = (): void => {
      collapsed.value = !collapsed.value;
      proxy?.$eventBus.$emit("sideCollapsed", collapsed.value);
    };

    // 中英切换
    const { locale } = useI18n();
    const handleLocaleChange = (items: any): void => {
      const { key } = items;
      locale.value = key;
      proxy?.$eventBus.$emit("localeChange", locale.value);
      proxy?.$message.success("Switch Language Success");
    };

    // 头像悬浮
    const handleAvatarOver = (flag: boolean): void => {
      avatarFade.value = flag;
    };

    return {
      handleClick,
      loading,
      collapsed,
      locale,
      handleCollapsed,
      handleLocaleChange,
      avatarFade,
      handleAvatarOver,
    };
  },
});
</script>

<style lang="scss" scoped>
.ant-layout-header {
  position: relative;
  height: 50px;
  line-height: 50px;
  .menu_trigger {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666666;
    transition: all 0.2s linear;
    &.active {
      transform: translateY(-50%) rotate(-90deg);
    }
  }
  .main_header {
    height: 100%;
    .right_menu {
      height: 50px;
      transform: translateX(36px);
      div {
        height: 100%;
      }
      .locale {
        i {
          font-size: 26px;
        }
      }
      .avatar_container {
        width: 60px;
        &:hover {
          :deep(.ant-avatar) {
            left: -5px;
          }
        }
        :deep(.ant-avatar) {
          transition: all 0.5s ease-out;
          left: 0;
          .ant-avatar-string {
            line-height: 0 !important;
            transform: scale(1) translateX(-50%) !important;
            img {
              width: 36px;
              height: 36px;
            }
          }
        }
        .a_caret_down {
          position: absolute;
          bottom: 10px;
          right: 0;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.a_header_popover {
  .icon-loading {
    display: inline-block;
    animation: turn 2s linear infinite;
  }
  @keyframes turn {
    0% {
      -webkit-transform: rotate(0deg);
    }

    50% {
      -webkit-transform: rotate(180deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }
}
</style>